<template>
  <div>
    <paged-table
      ref="dptable"
      :entity-name="entityName"
      :request-param="pagerequest"
    >
      <template slot="FilterItems">
        <el-select
          v-model="pagerequest.typeId"
          class="filter-item"
        >
          <el-option
            v-for="item in typeOptions"
            :key="item.id"
            :label="item.displayName"
            :value="item.id"
          />
        </el-select>

        <el-select
          v-model="pagerequest.isQRCodePrinted"
          class="filter-item"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </template>

      <template slot="ExtendButtons">
        <el-dropdown
          class="filter-item"
          @command="handleCommand($event)"
        >
          <el-button
            type="primary"
            icon="el-icon-setting"
          >
            操作<i class="el-icon-arrow-down el-icon--right" />
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="bulkCreate"><i class="el-icon-edit" />设备生产</el-dropdown-item>
            <el-dropdown-item
              command="markPrinted"
              divided
            ><i class="el-icon-document-checked" />标记为已打印</el-dropdown-item>
            <el-dropdown-item command="markUnPrinted"><i class="el-icon-document-remove" />标记为未打印</el-dropdown-item>
            <el-dropdown-item
              divided
              command="delete"
            ><i class="el-icon-delete" />删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>

      <template slot="TableColumns">
        <el-table-column
          type="selection"
          width="55"
        />

        <el-table-column
          prop="deviceNo"
          label="设备编号"
        />

        <el-table-column
          prop="displayName"
          label="产品分类"
        >
          <template slot-scope="{row}">
            <span>{{ row.deviceType.displayName }}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="isQRCodePrinted"
          label="二维码打印"
        >
          <template slot-scope="{row}">
            <el-tag :type="row.isQRCodePrinted | booleanTagFilter">{{ row.isQRCodePrinted?'已打印':'未打印' }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          sortable="custom"
          prop="creationTime"
          :label="L('CreationTime')"
        >
          <template slot-scope="{row}">
            <span>{{ row.creationTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </template>
        </el-table-column>
      </template>
    </paged-table>

    <bulk-create-device
      ref="bulkCreateDevice"
      :type-options="createTypeOptions"
      @reflash-table="reflashTable"
    />

  </div>
</template>

<script>
import pagedTable from '@/components/PagedTable'
import bulkCreateDevice from './components/BulkCreateDevice'
import { mapActions } from 'vuex'

export default {
  name: 'DeviceProduce',
  components: { pagedTable, bulkCreateDevice },
  data() {
    return {
      entityName: 'deviceProduce',
      pagerequest: { isQRCodePrinted: null, typeId: null },
      options: [{
        value: null,
        label: '二维码打印'
      }, {
        value: true,
        label: '已打印'
      }, {
        value: false,
        label: '未打印'
      }],
      typeOptions: [{ displayName: '产品类别', id: null }],
      createTypeOptions: []

    }
  },
  async created() {
    var tmpDatas = await this.$store.dispatch('deviceProduce/getAllTypesForSelection')
    this.createTypeOptions = this.createTypeOptions.concat(tmpDatas)
    this.typeOptions = this.typeOptions.concat(tmpDatas)
  },
  methods: {
    ...mapActions('deviceProduce', ['batchDelete', 'batchUpdateQRCodePrintStatus']),

    handleCommand(command) {
      switch (command) {
        case 'bulkCreate':
          this.$refs.bulkCreateDevice.open()
          break
        case 'markPrinted':
          this.markPrinted(true)
          break
        case 'markUnPrinted':
          this.markPrinted(false)
          break
        case 'delete':
          this.deletItems()
          break
      }
    },

    reflashTable() { this.$refs.dptable.pageChange(1) },

    getSelectionIds() {
      var ids = this.$refs.dptable.multipleSelection.map(s => s.id)
      if (!ids.length) {
        this.$message({
          type: 'warning',
          message: '请选择选项设备'
        })
      }
      return ids
    },

    async markPrinted(IsPrinted) {
      var ids = this.getSelectionIds()
      if (!ids.length) return
      await this.batchUpdateQRCodePrintStatus({ data: { ids, status: IsPrinted }})
      this.reflashTable()
      this.$message({
        type: 'success',
        message: '标记成功!'
      })
    },

    deletItems() {
      var ids = this.getSelectionIds()
      if (!ids.length) return

      this.$confirm(`删除选定项`, '你确定吗删除？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await this.batchDelete({ data: ids })
        this.reflashTable()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>
